<template>
    <div>
        <div>
            <el-form :model="form" label-width="100px" class="demo-form-inline" :inline="true">
                <el-form-item label="名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="所属路线">
                    <el-select v-model="form.transportLineId" placeholder="请选择">
                        <el-option label="请选择" value=""></el-option>
                        <el-option :label="itme.name" :value="itme.id" v-for="itme in TransportLineList"
                            :key="itme.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryTrips">查询</el-button>
                    <el-button type="primary" @click="addDialogVisible = true; addForm = {}">添加</el-button>

                </el-form-item>
            </el-form>

            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="编号">
                </el-table-column>
                <el-table-column prop="name" label="车次名称">
                </el-table-column>
                <el-table-column label="所属线路">
                    <template v-slot="transportLine">
                        <span v-for="itme in TransportLineList" :key="itme.id"
                            v-if="transportLine.row.transportLineId == itme.id">
                            {{ itme.name }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="周期">
                    <template v-slot="period">
                        {{ period.row.period == 1 ? "天" : period.row.period == 2 ? "周" : "月" }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template v-slot="status">
                        {{ status.row.status == 0 ? "禁用" : "正常" }}
                    </template>
                </el-table-column>

                <el-table-column prop="on" label="操作" width="180">
                    <template v-slot="Student">
                        <el-button type="warning" @click="showUpdateTransportTrips(Student.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteTransportTrips(Student.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[2, 4, 6, 8]" :page-size="2"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <div>
            <el-dialog title="添加车次" :visible.sync="addDialogVisible" width="30%" :before-close="handleClose">
                <div>
                    <el-form ref="form" :model="addForm" label-width="80px">
                        <el-form-item label="车次名称">
                            <el-input v-model="addForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="所属路线">
                            <el-select v-model="addForm.transportLineId" placeholder="请选择">
                                <el-option :label="itme.name" :value="itme.id" v-for="itme in TransportLineList"
                                    :key="itme.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="起始时间">
                            <el-time-select placeholder="起始时间" v-model="addForm.departureTime" :picker-options="{
                                start: '00:00',
                                step: '00:30',
                                end: '23:30'
                            }"></el-time-select>
                        </el-form-item>
                        <el-form-item label="周  期">
                            <el-select v-model="addForm.period" placeholder="请选择">
                                <el-option label="天" value="1"></el-option>
                                <el-option label="周" value="2"></el-option>
                                <el-option label="月" value="3"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addTransportTrips">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <div>
            <el-dialog title="修改车次" :visible.sync="updateDialogVisible" width="30%" :before-close="handleClose">
                <div>
                    <el-form ref="form" :model="updateForm" label-width="80px">
                        <el-form-item label="车次名称">
                            <el-input v-model="updateForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="所属路线">
                            <el-select v-model="updateForm.transportLineId" placeholder="请选择">
                                <el-option :label="itme.name" :value="itme.id" v-for="itme in TransportLineList"
                                    :key="itme.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车次名称">
                            <el-time-select placeholder="起始时间" v-model="updateForm.departureTime" :picker-options="{
                                start: '00:00',
                                step: '00:30',
                                end: '23:30'
                            }"></el-time-select>
                        </el-form-item>
                        <el-form-item label="周  期">
                            <el-select v-model="updateForm.period" placeholder="请选择">
                                <el-option label="天" :value="1"></el-option>
                                <el-option label="周" :value="2"></el-option>
                                <el-option label="月" :value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="updateDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateTransportTrips">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    created() {
        this.queryTrips();
        this.queryTransportLineAll();
    },
    data() {
        return {
            form: {},
            TransportLineList: [],
            tableData: [],//表格数据
            currentPage: 1,//页面下标
            total: 0,//总页数
            pageSize: 2,//页面大小 
            addDialogVisible: false, //添加对话框
            addForm: {}, //添加数据
            updateForm: {}, //修改数据
            updateDialogVisible: false, //修改对话逛

        }
    }, methods: {

        //删除车次
        async deleteTransportTrips(row) {
            let result = await axios.post("/api/pd-basecjj/pd-transport-trips/deleteTransportTrips", row)
            if (result.data.code == "200") {
                this.$message('删除成功');
                this.queryTrips();
            }
        },

        // 展示修改
        showUpdateTransportTrips(row) {
            this.updateForm = JSON.parse(JSON.stringify(row));
            this.updateDialogVisible = true;
        },

        // 修改车次
        async updateTransportTrips() {
            let result = await axios.post("/api/pd-basecjj/pd-transport-trips/updateTransportTrips", this.updateForm)

            this.updateDialogVisible = false;
            if (result.data.code == "200") {
                this.$message('修改成功');
                this.queryTrips();
            }
        },
        // 添加车次
        async addTransportTrips() {
            let result = await axios.post("/api/pd-basecjj/pd-transport-trips/addTransportTrips", this.addForm);
            this.addDialogVisible = false;
            if (result.data.code == "200") {
                this.$message('添加成功');

                this.queryTrips();
            }
        },
        //  查询所有线路
        async queryTransportLineAll() {
            let result = await axios.get("/api/pd-base/pd-transport-line/queryAll")
            console.log(result.data);
            this.TransportLineList = result.data.data;
        },
        // 分页查询车次
        async queryTrips() {
            let result = await axios.post("/api/pd-basecjj/pd-transport-trips/queryPdTransportTrips", { currentPage: this.currentPage, pageSize: this.pageSize, condition: this.form })
            console.log(result.data);
            this.total = result.data.data.total;
            this.tableData = result.data.data.list;
        },

        // 选中页面大小
        handleSizeChange(val) {
            this.pageSize = val;
            this.queryTrips();
        },
        //选择第几页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.queryTrips();
        },
        // 关闭对话框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    }
}
</script>

<style scoped></style>